<template>
  <div class="rating">
    <div class="header">
      <div class="title">集客专线大会战</div>
    </div>
    <div class="content">
      <ul class="list">
        <li class="item" v-for="(item, index) in scoreData" :key="index" @click="open(item,index)">
          <div class="info" v-if="index === 0">
            <div class="name">{{item.TYPE}}</div>
            <div class="num">{{item.SCORE | toFixed}}<span class="unit">分</span></div>
            <div class="desc">
              <img class="img-1" v-if="item.CEIL>0" src="./rise.png" alt="">
              <img class="img-1" src="./drop.png" v-else alt="">
              环比{{item.CEIL | toFixed}}%
            </div>
          </div>
          <div class="info" v-else>
            <img class="img" v-if="index===1" src="./ra_1.png" alt="">
            <img class="img" v-else-if="index===2" src="./ra_2.png" alt="">
            <img class="img" v-else-if="index===3" src="./ra_3.png" alt="">
            <img class="img" v-else-if="index===4" src="./ra_4.png" alt="">
            <img class="img" v-else-if="index===5" src="./ra_5.png" alt="">
            <img class="img" src="./ra_6.png" v-else alt="">
            <span class="name">{{item.TYPE.substr(0, 4)}}</span>
            <div class="num">{{item.SCORE | toFixed}}<span class="unit">分</span></div>
          </div>
        </li>
      </ul>
      <slot name="chart"></slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'rating',
  props: {
    scoreData: {
      type: Array,
      default() {
        return [];
      }
    },
    cityData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  filters: {
    toFixed(num) {
      return num.toFixed(2);
    }
  },
  methods: {
    open(item, index) {
      if (item.TYPE !== '全省') {
        this.$router.push({
          name: 'battle',
          query: {
            dateTime: item.DATE_TIME,
            parentIndex: item.TYPE,
            currentTab: index - 1
          }
        });
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
  .rating
    margin-top : 20px
    background : #fff
    border-radius : 6px
    overflow : hidden

  .header
    height : 88px
    overflow : hidden
    border-bottom : 1px solid #eee

  .title
    float : left
    margin-top : 20px
    padding : 8px 20px
    font-size : 28px
    border-radius : 0 22px 22px 0
    background : #ff9a3f
    color : #fff

  .list
    overflow : hidden

  .item
    float : left
    width : 25%
    font-size : 24px
    border-right : 1px solid #eee
    border-bottom : 1px solid #eee
    &:last-of-type, &:nth-of-type(4)
      border-right : none
    &:first-of-type
      .info
        padding : 22px 0
        height : 178px
        .name
          margin-bottom : 10px
          line-height : 36px
          font-size : 36px
        .num
          margin-bottom : 10px
          line-height : 48px
          font-size : 48px
        .unit
          font-size : 28px
        .desc
          line-height : 24px
          color : #999
          .img-1
            width : 18px
            height : 18px
    .info
      position : relative
      padding : 16px 0
      height : 88px
      text-align : center

      .img
        position absolute
        top : 28px
        left : 8px
        width : 25px
        height : 25px
      .num
        margin-top : 6px

  .chart
    height : 300px
    background : #eee

</style>
